<template>
	<view class="wrap">
		<!-- <u-gap height="20" bgColor="#f5f5f5"></u-gap> -->
		<u-cell-group class="datails-examine">

			<u-cell title="申请编号" :label="rowInfo.number" :clickable="true"></u-cell>
			<u-cell title="盖章类型" :label="rowInfo.stampType === 1 ? '项目盖章':'其他盖章'" :clickable="true"></u-cell>
			<u-cell v-if="rowInfo.stampType === 1" title="项目名称" :label="rowInfo.proName" :clickable="true"></u-cell>
			<u-cell v-if="rowInfo.stampType === 2" title="其他盖章说明" :label="rowInfo.reason" :clickable="true"></u-cell>
			<u-cell title="申请时间" :label="rowInfo.beginTime" :clickable="true"></u-cell>
			<u-cell title="盖章事由" :label="rowInfo.remark" :clickable="true"></u-cell>
			<view style="padding: 8px 22px !important;">
				<u-upload :fileList="fileListfj" @afterRead="afterRead"
					:deletable="viewCode === 2 && currentNode.nodeName === '行政审批' ? true : false" @delete="deletePic"
					name="fj" multiple :maxCount="fileListfj && fileListfj.length > 0 ? fileListfj.length :10"
					:uploadIcon="viewCode === 2 && currentNode.nodeName === '行政审批' ? 'plus' :''"
					:uploadText="viewCode === 2 && currentNode.nodeName === '行政审批' ? '选择图片':''"
					:disabled="viewCode === 2 && currentNode.nodeName === '行政审批' ? false : true">
				</u-upload>
			</view>

		</u-cell-group>
		<view style="padding: 8px 22px" v-if="viewCode === 2 ">
			<u--textarea placeholder="请填写审批意见" v-model="auditContent" maxlength="500" count></u--textarea>
		</view>
		<u-gap height="20" bgColor="#f5f5f5"></u-gap>
		<!-- 流程图 -->
		<u-time-line>
			<u-time-line-item nodeTop="2">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node>
					<image class="user-images" :src="getImg('start','','','')"></image>
				</template>
				<template v-slot:content>
					<view style="justify-content: space-between;display: flex;">
						<view class="u-order-title">开始</view>
						<view class="u-order-time">{{rowInfo.createTime}}</view>
					</view>
				</template>
			</u-time-line-item>

			<template v-for="(item,index) in historyNodeList">
				<u-time-line-item nodeTop="2" :key="item.key">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<image class="user-images" :src="getImg('','',item,historyNodeList)"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">{{item.nodeName}}</view>
							<view class="u-order-time">{{item.handlerTime}}</view>
						</view>
						<view class="u-order-desc">{{item.nodeContent}}</view>
					</template>
				</u-time-line-item>
			</template>

			<u-time-line-item nodeTop="2">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node>
					<image class="user-images"
						:src="getImg('','end',historyNodeList && historyNodeList.length > 0 && historyNodeList[historyNodeList.length-1],'')">
					</image>
				</template>
				<template v-slot:content>
					<view style="justify-content: space-between;display: flex;">
						<view class="u-order-title">结束</view>
						<view class="u-order-time"></view>
					</view>
				</template>
			</u-time-line-item>





		</u-time-line>



		<u-gap height="20" bgColor="#f5f5f5"></u-gap>

		<u-row gutter="32" class="bottom-box subBtn accept" justify="center" v-if="viewCode === 2 "
			style="bottom: 40rpx;margin-left: 0px;">
			<u-col span="5">
				<view><u-button type="primary" shape="circle" @click="audit()">同意</u-button>
				</view>
			</u-col>
			<u-col span="5">
				<view><u-button :plain="true" type="error" shape="circle" @click="back()">拒绝</u-button>
				</view>
			</u-col>
		</u-row>

	</view>
</template>

<script>
	import {
		getTodoAction,
		getUser,
		getWorkFlowImg,
		getCompanyId,
		uploadFilePromise,
	} from '../../../network/service/addressBook.js';
	import * as aes from '../../../common/lgaes.js';
	export default {
		data() {
			return {
				rowInfo: {},
				auditData: {},
				nextNode: '',
				currentNode: '',
				submitTableData: [],
				historyNodeList: [],
				auditContent: '',
				fileListfj: [
					// 	{
					// 	url: 'https://img0.baidu.com/it/u=3846695387,1572281966&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
					// }, {
					// 	url: 'https://gd-hbimg.huaban.com/32c03991a4b160f7995939e3cbb15635211a0d503e132-YttxNL_fw658'
					// }, {
					// 	url: 'https://img2.baidu.com/it/u=2819655934,963197807&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'
					// }, {
					// 	url: 'https://img2.baidu.com/it/u=2037909377,464167036&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=499'
					// },
				]
			};
		},
		name: 'stamp-info',
		computed: {

		},
		props: {
			bizType: {
				type: Number,
				default: 0
			},
			billId: {
				type: String,
				default: ''
			},
			viewCode: {
				type: Number,
				default: 0
			},
			mesgId: {
				type: String,
				default: ''
			}


		},

		created() {},

		mounted() {
			this.getStampInfo(this.billId)

		},
		methods: {

			getImg(start, end, item, historyList) {
				return getWorkFlowImg(start, end, item, historyList)
			},
			getStampInfo(billId) {
				// 查询 盖章信息
				let params = {
					url: '/stamp/selectStamp',
					method: 'POST',
					data: {
						id: billId
					},
				}
				getTodoAction(params).then(res => {
					const resList = res.data.list[0];
					if (resList) {
						this.rowInfo = {
							...resList,
						}
						// 获取附件
						this.getFjInfo()
						// 获取流程信息
						this.getWorkFlowInfo()
					}
				})
			},

			/**
			 * 获取用章附件
			 */
			getFjInfo() {

				let params = {
					url: '/fileUpload/getAttachments',
					method: 'POST',
					data: {
						boId: this.billId,
						assoType: 12,
						pageSize: 99
					},
				}
				getTodoAction(params).then(res => {
					this.fileListfj = []
					res.data.list.map(item => {
						this.fileListfj.push({
							url: item.url,
							id: item.id
						})
					})
				})
			},

			/**
			 * 获取流程信息
			 */
			getWorkFlowInfo() {
				let workflowParams = {
					url: '/proceDef/getProcDefById',
					method: 'POST',
					data: {
						id: this.rowInfo.procDefId, // 流程实例Id
						userRoleIds: getUser().userRoleIds,
						companyId: this.rowInfo.companyId,
					},
				}
				getTodoAction(workflowParams).then(res => {
					if (res.meta.status !== "000000") {
						// 
						uni.showModal({
							title: '有异常啦！',
							content: res.data.alert_msg
						});
						return false
					} else {
						// 下一审批节点
						const nodeTemp = res.data.list.procNodeList.filter(info => info.id === this
							.rowInfo
							.nextAuditNode)[0];
						let node = {};
						const nextAuditPerson = this.rowInfo.nextAuditPerson;
						if (nextAuditPerson && nextAuditPerson.indexOf("-") > -1) {
							const strs = nextAuditPerson.split("-");
							if (!nodeTemp) {
								node = {
									id: strs[0],
									nodeName: strs[0],
									auditPerson: strs[0],
									auditPersonName: strs[1],
								};

							} else {
								node = {
									...nodeTemp,
									auditPerson: strs[0],
									// auditPersonName : strs[1],
								}
							}

						}

						// 当前节点
						const current = res.data.list.procNodeList.filter(info => info.id === this
							.rowInfo
							.currentAuditNode)[0];


						this.auditData = res.data.list // 返回结果集给对应的状态 流程审批节点
						this.nextNode = node
						this.currentNode = current
						this.historyNodeList = res.data.list.procNodeList
						console.log(this.historyNodeList)
					}

				})
			},

			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},

			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				// 用于存储符合条件的图片
				let Images = [];
				// 遍历上传的每张图片
				for (let i = 0; i < lists.length; i++) {
					const item = lists[i];
					// 验证图片格式
					// const isImage = /\.(png|jpe?g)$/i.test(item.url);
					// if (!isImage) {
					// 	uni.showToast({
					// 		title: '只能上传png，jpg，jpeg格式的图片',
					// 		icon: 'none',
					// 		duration: 3000
					// 	});
					// 	// 删除不符合条件的图片
					// 	lists.splice(i, 1);
					// 	// 跳过当前图片，进行下一张图片的验证
					// 	continue;
					// }
					// 验证图片大小
					const maxSize = 50 * 1024 * 1024; // 2MB大小限制
					if (item.size > maxSize) {
						uni.showToast({
							title: '图片大小不能超过2MB',
							icon: 'none',
							duration: 3000
						});
						// 删除不符合条件的图片
						lists.splice(i, 1);
						// 跳过当前图片，进行下一张图片的验证
						continue;
					}
					Images.push(item)
				}



				let fileListLen = this[`fileList${event.name}`].length
				Images.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})





				for (let i = 0; i < Images.length; i++) {
					const updatePost = {
						id: this.billId,
						uid: getUser().id,
						companyId: getCompanyId(),
					}
					await uploadFilePromise('stamp/fjSave', Images[i].url, updatePost).then(result => {
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result.data.list.attachmentInfoList[0].mobileUrl
						}))
						fileListLen++
					})

				}
			},




			/**
			 * 审批同意
			 */
			audit() {
				const bizType = this.bizType
				const billId = this.billId

				const count = this.nextNode.seq;
				// 界面上下一步处理人的下一步节点
				let next = this.auditData.procNodeList.filter((info) => info.seq === count + 1)[0];

				if (next === null || next === "" || next === undefined) { // 说明最后一个节点
					next = {
						id: "结束",
						nodeName: "结束",
					};
				}

				const newData = [];
				newData.push({
					key: 1,
					approval: this.auditContent ? this.auditContent : '同意',
					editable: true,
					isNew: true,
				});
				this.submitTableData = newData


				if (this.currentNode.nodeName === '行政审批') {
					if (!this.rowInfo.fjFileList || this.rowInfo.fjFileList.length === 0) {
						uni.showToast({
							title: '请上传用章文件！',
							content: res.data.alert_msg
						});
						return false
					}
				}
				let params = {
					uid: getUser().id,
					sendPerson: getUser().person,
					handlerCompany: getCompanyId(),
					handlerUser: getUser().id,
					isDone: 1,
					id: this.currentNode.id,
					currentAuditNode: this.nextNode.id,
					nextAuditNode: next.id,
					nextAuditNodeInfo: next,
					nextAuditPerson: next.auditPerson,
					billId: this.rowInfo.id,
					billType: 5,
					procDef: this.rowInfo.procDefId,
					proName: this.rowInfo.number,
					tableData: JSON.stringify(this.submitTableData),
					nextNodeInfo: this.nextNode,
					currentNodeHz: this.currentNode,
					mesgId: this.mesgId,
					proManagerAreaId: getUser().areaId,
					number: this.rowInfo.number,
				};

				let submitType = {
					url: '/procNode/audit',
					method: 'POST',
					data: params,
				}
				getTodoAction(submitType).then(res => {
					if (res.meta.status !== "000000") {
						// 
						uni.showToast({
							title: '审批有异常啦！',
							content: res.data.alert_msg
						});
						return false
					} else {
						uni.showToast({
							title: '审批成功！',
							content: '离成功又进一步'
						});
						uni.navigateBack({
							delta: 1
						});
					}
				})


			},

			/**
			 * 审批退回
			 */
			back() {
				const bizType = this.bizType
				const billId = this.billId
				const workFlowAuditParam = []
				workFlowAuditParam.push({
					WorkFlowAuditParamInfo: this.rowInfo,
				});

				const newData = [];
				newData.push({
					key: 1,
					approval: this.auditContent ? this.auditContent : '不同意',
					editable: true,
					isNew: true,
				});
				this.submitTableData = newData



				const param = {
					url: '/proceDef/back',
					method: 'POST',
					data: {
						...this.auditData,
						workFlowAuditParam: workFlowAuditParam[0],
						billType: 5,
						backType: 1,
						uid: getUser().id,
						mesgId: this.mesgId,
						tableData: JSON.stringify(this.submitTableData),
						backNodeInfo: this.currentNode,
					}

				}



				getTodoAction(param).then(res => {
					if (res.meta.status !== "000000") {
						// 
						uni.showModal({
							title: '审批拒绝有异常啦！',
							content: res.data.alert_msg
						});
						return false
					} else {
						uni.showModal({
							title: '拒绝成功！',
							content: '流程已经退回'
						});
						uni.navigateBack({
							delta: 1
						});
					}
				})



			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.datails-examine {
		background-color: #ffffff;
	}

	.wrap .search {
		background: #ffffff;
	}

	.subBtn {
		position: fixed;
		width: 100%;
		color: #007aff;
		background-color: #007aff;
		border-radius: 10rpx;
		font-weight: 600;
	}

	.accept {
		font-weight: 600;
		text-align: center;
		color: #007aff;
		/* background-color: #007AFF; */
		position: fixed;
		bottom: 0px;
		background: rgb(255, 255, 255) none repeat scroll 0% 0%;
		z-index: 999;
	}



	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.u-time-axis {
		position: relative;
		background: #fff;
		padding: 15px 10px 10px 70px;
	}
</style>